<template>
    <topMenu ref="rightMenuRef"></topMenu>
    <div class="wrapper-box">
        <div class="padding-lr-sm">
            <el-breadcrumb class="padding-tb-sm" separator="/">
                <el-breadcrumb-item :to="{ path: '/recordView' }">绘画记录</el-breadcrumb-item>
                <el-breadcrumb-item>详情页面</el-breadcrumb-item>
            </el-breadcrumb>
            <el-row :gutter="20" class="record-list">
                <el-col v-for="(item,index) in imgList" :key="index" :span="8">
                    <el-card :body-style="{ padding: '0px' }">
                        <!--<img :src="item" class="image"/>-->
                        <el-image :initial-index="index" :preview-src-list="imgList" :src="item" :zoom-rate="1.2" class="image" fit="cover"/>
                        <div class="padding-xs">
                            <div class="margin-bottom-xs">{{ detailData.title }}</div>
                            <div class="flex align-center justify-between">
                                <div>{{ detailData.created_at }}</div>
                                <div class="flex align-center">
                                    <el-tooltip :content="tipContent" placement="top" raw-content>
                                        <el-icon>
                                            <View/>
                                        </el-icon>
                                    </el-tooltip>
                                    <el-popover placement="bottom">
                                        <template #reference>
                                            <el-icon class="margin-left-xs">
                                                <MoreFilled/>
                                            </el-icon>
                                        </template>
                                        <template #default>
                                            <el-row>
                                                <el-col :span="24" class="margin-bottom-xs">
                                                    <el-button type="warning" @click="downImage(item,detailData.title)">
                                                        下载
                                                    </el-button>
                                                </el-col>
                                                <el-col :span="24">
                                                    <el-button type="danger">删除</el-button>
                                                </el-col>
                                            </el-row>
                                        </template>
                                    </el-popover>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script lang="ts" setup="">
    import topMenu from '../../components/topMenu.vue'
    import {useRouter, useRoute} from "vue-router";
    import {ref} from "vue"
    import {drawRecordDetail} from "../../http/user";

    const router = useRouter()
    const route = useRoute()
    const detailData = ref({})
    const imgList = ref([])
    const tipContent = ref('')
    console.log("route", route.query.id)

    drawRecordDetail({id: route.query.id}).then(res => {
        const {data} = res;
        let prompt = data.origin_prompt
        let origin_arg = data.origin_arg
        let promptArr = prompt.split(',');
        console.log("promptArr", promptArr)
        data.title = promptArr[0]
        detailData.value = data;
        imgList.value = data.image_url

        let htmlStr = ''
        for (let item in origin_arg) {
            console.log("item", origin_arg[item])
            if (htmlStr === '') {
                htmlStr = `<p><span>${origin_arg[item].name}</span>:<span>${origin_arg[item].value}</span></p>`
            } else {
                htmlStr = `${htmlStr}<p><span>${origin_arg[item].name}</span>:<span>${origin_arg[item].value}</span></p>`
            }
            tipContent.value = htmlStr
        }

    })

    const downImage = async (href, name) => {
        console.log("download", href, name)
        // 获取图片对象和画布对象
        const imgUrl = href
        const response = await fetch(imgUrl)
        const blob = await response.blob()
        // 创建下载链接
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = name
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        // 释放 Blob URL
        window.URL.revokeObjectURL(url)
    }

    //返回上一页
    const handleBack = () => {
        router.back()
    }
</script>

<style lang="scss" scoped>
  .el-button {
    width: 100% !important;
  }

  .image {
    width: 100%;
    cursor: pointer;
  }
</style>
